<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>封装模块</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
</head>

<body>
  <div id="canvas-wrp">
    <canvas id="canvas" style=" border:1px solid #ccc ;display: block; margin: 100px auto;"></canvas>

  </div>
</body>
<script>
  window.onload = function () {
    let canvas = document.querySelector('#canvas')
    canvas.width = 800
    canvas.height = 600
    let cxt = canvas.getContext('2d')


    drawRect(cxt, 150, 100, 60, 60, 'red', 4, 'pink')
    drawRect(cxt, 300, 100, 60, 60, '#0f0', 4, 'pink')
    drawRect(cxt, 450, 100, 60, 60, '#00f', 4, 'pink')

  }
  function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor) {
    cxt.beginPath();
    cxt.rect(x, y, width, height);
    cxt.closePath()

    cxt.lineWidth = borderWidth
    cxt.strokeStyle = borderColor
    cxt.fillStyle = fillColor

    cxt.fill()
    cxt.stroke()
  }
</script>

</html>